<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Echarts Demo</title>
</head>
<body>
	 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>
    <script type="text/javascript" src="lib/echarts/build/dist/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="lib/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
   
    (function(){
    	// 路径配置
	    require.config({
	        paths: {
	            echarts: 'lib/echarts/build/dist'
	        }
	    });
	    
    	require(['echarts','echarts/chart/map'],function(ec){
    		require('echarts/util/mapData/params').params.XM = {
    			 getGeoJson: function (callback) {
    			        $.getJSON('lib/geoJson/china-main-city/350200.json',callback);
    			    }
    		}
    		
    		// 基于准备好的dom，初始化echarts图表
    		 var myChart = ec.init(document.getElementById('main'));
    		 var option = {
    				    backgroundColor: '#1b1b1b',
    				    color: ['gold','aqua','lime'],
    				    title : {
    				        text: '模拟迁徙',
    				        subtext:'数据纯属虚构',
    				        x:'center',
    				        textStyle : {
    				            color: '#fff'
    				        }
    				    },
    				    tooltip : {
    				        trigger: 'item',
    				        formatter: '{b}'
    				    },
    				    legend: {
    				        orient: 'vertical',
    				        x:'left',
    				        data:['北京 Top10', '上海 Top10', '广州 Top10'],
    				        selectedMode: 'single',
    				       
    				        textStyle : {
    				            color: '#fff'
    				        }
    				    },
    				    toolbox: {
    				        show : true,
    				        orient : 'vertical',
    				        x: 'right',
    				        y: 'center',
    				        feature : {
    				            mark : {show: true},
    				            dataView : {show: true, readOnly: false},
    				            restore : {show: true},
    				            saveAsImage : {show: true}
    				        }
    				    },
    				    dataRange: {
    				        min : 0,
    				        max : 100,
    				        calculable : true,
    				        color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
    				        textStyle:{
    				            color:'#fff'
    				        }
    				    },
    				    series : [
    				        {
    				            name: '全国',
    				            type: 'map',
    				            roam: true,
    				            hoverable: false,
    				            mapType: 'china',
    				            itemStyle:{
    				                normal:{
    				                    borderColor:'rgba(100,149,237,1)',
    				                    borderWidth:0.5,
    				                    areaStyle:{
    				                        color: '#1b1b1b'
    				                    }
    				                }
    				            },
    				            data:[],
    				            geoCoord: {
    				                '上海': [121.4648,31.2891],
    				               
    				                '北京': [116.4551,40.2539],
    				               
    				                '广州': [113.5107,23.2196]
    				                
    				            }
    				        },
    				        {
    				            name: '北京 Top10',
    				            type: 'map',
    				            mapType: 'china',
    				            data:[],
    				            markLine : {
    				                smooth:true,
    				                effect : {
    				                    show: true,
    				                    scaleSize: 1,
    				                    period: 30,
    				                    color: '#fff',
    				                    shadowBlur: 10
    				                },
    				                itemStyle : {
    				                    normal: {
    				                        borderWidth:1,
    				                        lineStyle: {
    				                            type: 'solid',
    				                            shadowBlur: 10
    				                        }
    				                    }
    				                },
    				                data : [
    				                    [{name:'北京'}, {name:'上海',value:95}]
    				                ]
    				            },
    				            markPoint : {
    				                symbol:'emptyCircle',
    				                symbolSize : function (v){
    				                    return 10 + v/10
    				                },
    				                effect : {
    				                    show: true,
    				                    shadowBlur : 0
    				                },
    				                itemStyle:{
    				                    normal:{
    				                        label:{show:false}
    				                    },
    				                    emphasis: {
    				                        label:{position:'top'}
    				                    }
    				                },
    				                data : [
    				                    {name:'上海',value:95}
    				                ]
    				            }
    				        },
    				        {
    				            name: '上海 Top10',
    				            type: 'map',
    				            mapType: 'china',
    				            data:[],
    				            markLine : {
    				                smooth:true,
    				                effect : {
    				                    show: true,
    				                    scaleSize: 1,
    				                    period: 30,
    				                    color: '#fff',
    				                    shadowBlur: 10
    				                },
    				                itemStyle : {
    				                    normal: {
    				                        borderWidth:1,
    				                        lineStyle: {
    				                            type: 'solid',
    				                            shadowBlur: 10
    				                        }
    				                    }
    				                },
    				                data : [
    				                   
    				                    [{name:'上海'},{name:'广州',value:80}]
    				                    
    				                   
    				                ]
    				            },
    				            markPoint : {
    				                symbol:'emptyCircle',
    				                symbolSize : function (v){
    				                    return 10 + v/10
    				                },
    				                effect : {
    				                    show: true,
    				                    shadowBlur : 0
    				                },
    				                itemStyle:{
    				                    normal:{
    				                        label:{show:false}
    				                    },
    				                    emphasis: {
    				                        label:{position:'top'}
    				                    }
    				                },
    				                data : [
    				                    {name:'广州',value:80}
    				                   
    				                ]
    				            }
    				        },
    				        {
    				            name: '广州 Top10',
    				            type: 'map',
    				            mapType: 'china',
    				            data:[],
    				            markLine : {
    				                smooth:true,
    				                effect : {
    				                    show: true,
    				                    scaleSize: 1,
    				                    period: 30,
    				                    color: '#fff',
    				                    shadowBlur: 10
    				                },
    				                itemStyle : {
    				                    normal: {
    				                        borderWidth:1,
    				                        lineStyle: {
    				                            type: 'solid',
    				                            shadowBlur: 10
    				                        }
    				                    }
    				                },
    				                data : [
    				                    
    				                    [{name:'广州'},{name:'北京',value:30}]
    				                   
    				                ]
    				            },
    				            markPoint : {
    				                symbol:'emptyCircle',
    				                symbolSize : function (v){
    				                    return 10 + v/10
    				                },
    				                effect : {
    				                    show: true,
    				                    shadowBlur : 0
    				                },
    				                itemStyle:{
    				                    normal:{
    				                        label:{show:false}
    				                    },
    				                    emphasis: {
    				                        label:{position:'top'}
    				                    }
    				                },
    				                data : [
    				                   
    				                    {name:'北京',value:30}
    				                    
    				                ]
    				            }
    				        }
    				    ]
    				};
    		 
    		// 为echarts对象加载数据 
    		 myChart.setOption(option);
    	});
    	
    })();
	 
    	
    	         
    
    </script>
</body>
</html>